<style lang="less">
@import "../assets/css/config.less";
#appoint .ivu-select-dropdown{
  margin: 65px 0!important;
}
#appoint .ivu-input.ivu-input-default{
  height: 36px;
  width: 320px;
}
#appoint .ivu-btn-primary{
  background-color: @color1;
  border-color: @color1;
  &:hover{
    background-color: @color2;
    border-color: @color1;
  }
}
</style>
<style lang="less" scoped>
@import "../assets/css/config.less";
.flex-row{
  display: flex;
  justify-content: start;
}
.demo-auto-complete-item {
  padding: 4px 0;
  border-bottom: 1px solid #f6f6f6;
}
.demo-auto-complete-group {
  font-size: 12px;
  padding: 4px 6px;
}
.demo-auto-complete-group span {
  color: #666;
  font-weight: bold;
  float: left;
}
.demo-auto-complete-group a {
  float: right;
}
.demo-auto-complete-count {
  float: right;
  color: #999;
}
.demo-auto-complete-more {
  display: block;
  margin: 0 auto;
  padding: 4px;
  text-align: center;
  font-size: 12px;
}
.index {
  background: #f8f8f9;
}
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.sub {
  width: 30%;
}

.flags {
  display: flex;
  justify-content: flex-start;
}
.result-sum{
  margin: 15px 0 0 0;
  float: left;
  font-size: 14px;
  font-weight: 550;
  color: #555;
}
.table-tr{
  height: 48px;
}
.table-tr td{
  border-right: 1px solid #e8eaec;
}
.table-unsign{
  border: 1px solid #dcdee2
}
.table-unsign tr:nth-child(2n+1){
  background-color: #fff;
}
.table-unsign tr:nth-child(2n){
  background-color: #F8F8F9;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 100;
}
h3{
  text-align: left;
  padding: 0 0 10px;
}
.search-box{
  display: flex;
  justify-content: start;
}
input{
  line-height: 18px;
  height: 36px;
  width: 320px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 5px 15px;
  font-size: 14px;
}
input:hover{
  border: 1px solid #c0c4cc;
}
input:focus{
  border-color: @color2;
  box-shadow: 0 0 2px 0px @color2;
  outline: none;
}
.button{
  line-height: 36px;
  background-color: @color1;
  margin: 0 10px 0;
  color: @white;
  border-radius: 4px;
  font-size: 14px;
  width: 80px;
  // letter-spacing: 2px;
  outline: none;
  border: none;
  cursor: pointer;
}
.button:hover{
  background-color: @color2;
}
.button:active{
  background-color: @color3;
}
p{
  font-size: 14px;
}
a{
  color: @color1;
}
</style>

<template>
  <div id="appoint">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout style="margin-top: 60px" id="content">
      <Layout :style="{padding: '0 24px 24px','background-color': 'white','min-width': '1210px'}">
        <div style="padding: 15px 0px 30px">
          <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
        </div>
        <div class="title">
          <div style="width: 50%">
            <h3>授予单个用户权限</h3>
            <!-- <Input class="input" search enter-button="搜索" placeholder="请输入用户名" @on-search="search"/> -->
            <div class="search-box">
              <input type="text" v-model="searchUsername" placeholder="请输入用户名">
              <button class="button" @click="search">搜索</button>
            </div>
          </div>
          <div style="width: 50%">
            <div class="flex-row">
              <h3>批量授予权限：</h3>
              <p>
                点击
                <a :href="downloadExcel">这里</a> 下载Excel模版，按要求填好后上传可批量打标签。
              </p>
            </div>
            <Upload
              :show-upload-list="false"
              :on-success="extract_list"
              type="drag"
              :action="upload_url"
              style="width:480px"
            >
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或拖拽文件到这里上传</p>
              </div>
            </Upload>
          </div>
        </div>
          <h3>请选择要授予的标签：</h3>
        <div class="flags">
          <AutoComplete v-model="flag" placeholder="请在此输入标签" style="width:300px;height:36px">
            <div class="demo-auto-complete-item" v-for="item in completeData">
              <div class="demo-auto-complete-group">
                <span>{{ item.title }}</span>
              </div>
              <Option v-for="option in item.children" :value="option.title" :key="option.title">
                <span class="demo-auto-complete-title">{{ option.title }}</span>
              </Option>
            </div>
          </AutoComplete>
          <button class="button" @click="appoint" style="margin-left: 30px">授予标签</button>
        </div>

        <div>
          <span class="result-sum">查询结果：共查询到 {{ studentSum }} 条用户信息</span>
        </div>
        <Table
          @on-selection-change="select"
          border
          style="margin-top:20px"
          stripe
          :columns="columns"
          :data="list"
        ></Table>
        <div v-if="unsignSum>0">
          <span class="result-sum">未注册学生人数：{{ unsignSum }}</span>
        </div>
        <div v-if="unsignSum>0">
          <span class="result-sum">未注册学生学号：</span>
        </div>
        <table v-if="unsignSum>0" class="table-unsign" style="margin-top:15px">
            <tr class="table-tr" v-for="(items,index) in unsign" :key="index">
              <td v-for="item in items" :key="item">
                <div class=""> 
                  <span>{{ item }}</span> 
                </div>
              </td>
            </tr>
        </table>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import myBreadcrumb from "../components/myBreadcrumb.vue";
import { appoint, findOneUser } from "../api/api";
var uploadURL = "";
var downloadURL = "";
if (process.env.NODE_ENV === "development") {
  uploadURL = "http://localhost:8080/api/uploadExcel";
  downloadURL = "http://localhost:8080/api/getExcel";
} else if (process.env.NODE_ENV === "production") {
  uploadURL = "https://www.ourspark.org/api/uploadExcel";
  downloadURL = "https://www.ourspark.org/api/getExcel";
}
export default {
  name: "appoint",
  data: function() {
    return {
      breadcrumbList: [{
        name: '首页',
        blod: true,
        to: 'index'
      }, {
        name: '权限分配'
      }],
      flag: "",
      selected: [],
      studentSum: 0,
      unsignSum: 0,
      unsign: [],
      upload_url: uploadURL,
      downloadExcel: downloadURL,
      list: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "真实姓名",
          key: "realName"
        },
        {
          title: "用户名",
          key: "username"
        },
        {
          title: "学号",
          key: "stuNo"
        },
        {
          title: "学校",
          key: "school"
        },
        {
          title: "操作",
          key: "",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      completeData: [
        {
          title: "身份标签",
          children: [
            {
              title: "助教"
            },
            {
              title: "老师"
            },
            {
              title: "学生"
            },
            {
              title: "管理员"
            }
          ]
        },
        {
          title: "学年",
          children: [
            {
              title:
                new Date().getFullYear() - 1 + "--" + new Date().getFullYear()
            },
            {
              title:
                new Date().getFullYear() + "--" + (new Date().getFullYear() + 1)
            },
            {
              title:
                new Date().getFullYear() +
                1 +
                "--" +
                (new Date().getFullYear() + 2)
            }
          ]
        },
        {
          title: "课程",
          children: [
            {
              title: "导论课"
            },
            {
              title: "本科创新创业选修课"
            },
            {
              title: "研究生创新创业课"
            },
            {
              title: "移动互联网创意与创业课"
            },
            {
              title: "内师大科技创新实践"
            }
          ]
        },
        {
          title: "组别",
          children: [
            {
              title: "做题组"
            },
            {
              title: "非做题组"
            }
          ]
        }
      ],
      searchUsername: ''
    };
  },
  mounted() {
  },
  components: {
    myheader: header,
    'my-breadcrumb': myBreadcrumb
  },
  methods: {
    search() {
      findOneUser({
        username: this.searchUsername
      })
        .then(response => {
          if (response.state === true) {
            this.list.push(response.result);
            this.studentSum = this.list.length;
          } else {
            this.$Message.error(response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
    },
    remove(index) {
      this.list.splice(index, 1);
      this.studentSum = this.list.length;
    },
    appoint() {
      if (this.flag === "") {
        this.$Modal.error({
          title: "错误！",
          content: "标签不能为空！"
        });
      } else if (this.selected.length === 0) {
        this.$Modal.error({
          title: "错误！",
          content: "未选择有效项！"
        });
      } else {
        appoint({
          flag: this.flag,
          selected: this.selected.map(person => {
            return person.UUID;
          })
        })
          .then(response => {
            if (response.state === true) {
              this.$Message.success("授予成功");
              this.selected = [];
              this.list = [];
              this.flag = "";
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      }
    },
    select(selection) {
      this.selected = selection;
    },
    extract_list(response, file, fileList) {
      if (response.errno === 1) {
        this.$Modal.error({
          title: "出错啦！请重新上传！",
          content: response.msg
        });
      } else if (response.errno === 0) {
        this.list = response.list;
        this.list.sort(function(a, b){ return a.stuNo - b.stuNo});
        this.studentSum = this.list.length;
        this.unsignSum = response.unSignin.length;
        let i = 0;
        for(let m=0; m<response.unSignin.length/4; m++){
          this.unsign[m] = [];
          for(let n=0; n<4; n++){
            if(response.unSignin[i]){
              this.unsign[m][n] = response.unSignin[i];
              i++;
            }
          }
        }
      }
    }
  }
};
</script>